<template>
  <div class="administrator-container">
     <div class="myBox">
    <div class="myTitle">
      <span class="mySpan">修改密码</span>
    </div>
    <div class="myBox2">
   <el-form
        ref="form"
        :model="formData"
        :rules="formRules"
        label-width="200px"
        class="myForm">
        <el-form-item label="账号" prop="uName">
          <el-input v-model="formData.uName" class="myInput"></el-input>
        </el-form-item>
        <el-form-item label="原密码" prop="oldpassword" >
          <el-input v-model="formData.oldpassword" class="myInput"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpassword" >
          <el-input v-model="formData.newpassword" class="myInput"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmNewPassword" >
          <el-input v-model="formData.confirmNewPassword" class="myInput"></el-input>
        </el-form-item>
      </el-form>
    </div>
     <div class="myfooder">
      <el-button @click="confirm" class="mybtn">确认</el-button>
      <el-button @click="reset" class="mybtn2" >重置</el-button>
    </div>
  </div>
  </div>

  
</template>

<script>
import axios from "axios";
export default {
  name: "inpatinentHospital",
  comName: "管理员管理",
  data() {
    return {
      formData: {
        uName: "",
        oldpassword: "",
        newpassword: "",
        confirmNewPassword: "",
      },
      formRules: {
        uName: [{ required: true, trigger: "change", message: "请输入账号" }],
        oldpassword: [{ required: true, trigger: "change", message: "请输入原密码" }],
        newpassword: [
          { required: true, trigger: "change", message: "请输入新密码" },
        ],
        confirmNewPassword: [
          { required: true, trigger: "change", message: "请确认新密码" },
        ],
      },
    };
  },
  methods: {
    reset() {
      this.$refs.form.resetFields();
    },
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log("通过校验");
          if (this.formData.newpassword !== this.formData.confirmNewPassword) {
            this.$notify.error({
              title: "确认密码必须一致",
            });

            return false;
          }

          axios({
            url: "/api/admin/edpasswordAdmin",
            method: "post",
            data: {
              ...this.formData,
            },
            headers: {
              Token: sessionStorage.getItem("Token"),
            },
          }).then((res) => {
            console.log(res);
            if (res.data.error === 0) {
              this.$notify.success({
                title: "修改成功",
              });

              sessionStorage.removeItem("Token");

              this.$router.replace({
                path: "/login",
              });
            } else {
              this.$notify.error({
                title: "修改失败",
              });
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>

.myBox {
  width: 95%;
  height: 500px;
  background-color: rgb(255, 255, 255);
  margin: 0 auto;
  margin-top: 30px;
  border: 3px rgb(176, 191, 255) solid;
  border-radius: 5px;
}

.myTitle {
  height: 55px;
  background-color: rgb(255, 255, 255);
  margin: 0 auto;
  border-bottom: rgb(212, 220, 255) 3px solid;
  text-align: center;
  padding: 10px 0px;
  

  .mySpan {
    line-height: 55px;
    margin-top: 25px;
    font-size: 22px;
  }
}

.myBox2 {
  display: flex;
  justify-content: center;
}

.myForm {
  margin-top: 20px;

  .myInput {
    width: 735px;
  }
}

.myfooder {
  width: 100%;
  height: 36px;
  text-align: center;

.mybtn{
background:rgb(165, 141, 252); 
color:#fff;
width:80px;
height:40px;
font-size:15px

}
.mybtn2{
background:rgb(141, 167, 252); 
color:#fff;
width:80px;
height:40px;
font-size:15px

}
}


</style>